<template lang="html">
<div class="live-gift-page normal-table-page">
	<Row :gutter="10">
		<Col span="18">
		<Card :dis-hover="true">
			<p slot="title">
				<Icon type="film-marker"></Icon> 节目管理
			</p>
			<div slot="extra">

				<Input v-model="searchKey" class="search-input" icon="search" placeholder="节目名称" style="width: 300px" @keydown.native.enter="doSearch"></Input>
				<Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

				<Button type="ghost" class="add-new-btn" icon="plus" @click="openAddModal()">新增</Button>
			</div>
			<Table :columns="liveProgramTableColumns" :loading="pageLoading" ref="concertTable" border :data="liveProgramList"></Table>

			<!-- <transition name="fade">
                            <div class="loading-cover" v-if="pageLoading">
                            <Spin fix size="large"></Spin>
                        </div>
                    </transition> -->
			<div class="page-ctrl" v-if="pageCount">
				<Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="10">
				</Page>
			</div>
		</Card>

		</Col>
		<Col span="6">
		<Card :dis-hover="true">
			<p slot="title">
				<Icon type="android-list"></Icon> 直播间
			</p>
			<Button slot="extra" type="ghost" @click="goLiveRoom()">管理</Button>
			<Tree :data="liveRoomList" ref="liveRoomTree" @on-select-change="onSelectChange"></Tree>
		</Card>
		</Col>

	</Row>
	<Modal :mask-closable="false" v-model="showModal" :title="selectData ? '编辑':'新增直播间 '+( selectRoom.title || '') + ' 节目'" :loading="modalLoading" class-name="live-program-modal" @on-ok="clickOK()">
		<Form :model="liveProgramForm" ref="liveProgramForm" :rules="liveProgramFormRules" :inline="true">
            <Row :gutter='10' style="height:250px">
                <Col span="12">
                    <header-img-uploader :img-upload-path="postUrl.doUploadProgramImg" :upload-img-data="uploadImgData" @on-upload-success="uploadImgSuccess" :show-img-path="uploadImgCallbackPath" class="auto-size-img-upload" suggest="建议尺寸 16:9"></header-img-uploader>
                </Col>
                <Col span="12">
                    <FormItem label="节目名称" prop="name">
                        <Input v-model="liveProgramForm.name" placeholder="输入节目名称"></Input>
                    </FormItem>
                    <FormItem label="直播状态" prop="status">
    					<RadioGroup v-model="liveProgramForm.status">
    						<Radio label="0">
    							未开始
    						</Radio>
    						<Radio label="1">
    							进行中
    						</Radio>
    						<Radio label="2">
    							已结束
    						</Radio>
    					</RadioGroup>
    				</FormItem>
                    <transition name="fade">
                        <FormItem label="视频" prop="vod_video_file_info_uuid" v-if="liveProgramForm.status == '2'">
                            <Select
                            v-model="liveProgramForm.vod_video_file_info_uuid"
                            filterable :transfer="true">
                            <Option v-for="(video, index) in videoList" :value="video.uuid" :key="video.uuid">{{video.video_name}}</Option>
                        </Select>
                    </FormItem>

                    </transition>

                </Col>
            </Row>
			<Row :gutter='10'>
				<Col span="12">
				<FormItem label="现场地址" prop="live_address">
					<Input v-model="liveProgramForm.live_address" placeholder="请输入直播现场地址"></Input>
				</FormItem>
				</Col>
				<!-- <Col span="12"> -->

				<!-- </Col> -->
				<Col span="12">
				<FormItem label="开始时间" prop="start_time">
					<DatePicker v-model="liveProgramForm.start_time" :clearable="false" :transfer="true" :placement="'top-start'" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"></DatePicker>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="结束时间" prop="end_time">
					<DatePicker v-model="liveProgramForm.end_time" :clearable="false" :transfer="true" :placement="'top-start'" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"></DatePicker>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="节目简介" prop="intro">
					<Input v-model="liveProgramForm.intro" placeholder="直播简介" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="节目详情" prop="detail">
					<Input v-model="liveProgramForm.detail" placeholder="" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
				</Col>

			</Row>
		</Form>
	</Modal>
</div>
</template>

<script src="./live-program.js">
</script>

<style lang="scss">
.live-program-modal {

    .ivu-modal {
        width: 60% !important;
        top: 30px;
        .ivu-form-item {
            width: 100%;
            margin: 0 0 24px;
        }
    }
    textarea {
        resize: none;
    }
}
</style>
